<template>
    <div class="navbar">
        <router-link to="/home" active-class="myactive" exact-active-class="exact-light">首页</router-link>
        <router-link to="/books" active-class="myactive" exact-active-class="exact-light">书城</router-link>
        <router-link to="/my" active-class="myactive" exact-active-class="exact-light">我的</router-link>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
.navbar{
    display: flex;
    position: fixed;
    bottom:0px;
    width:100%;
    line-height: 40px;
}
.navbar a{
    flex:1;
    text-align: center;
}
/* .navbar a.exact-light{
    background-color: gray;
    color:red;
    font-weight: bold;
} */
.myactive{
    background-color:antiquewhite;
    color:blue;
    font-weight: bold;
}
</style>